<template>
  <div class="app-container table-app-container">
    <div class="block versions-tab">
      <el-timeline>
        <el-timeline-item v-for="item in list" :key="item.id" :timestamp="utc2local(item.createTime)" placement="top">
          <el-card shadow="never">
            <div class="modify-desc">
              <div> <span class="label">生命周期：</span><span class="value" style="color: #16a4bb;font-weight:bold">{{ item.lifeCycle }}</span></div>
              <!-- <div> <span class="label">操作人：</span><span class="value">{{ item.userName }}</span></div> -->
              <!-- <div><span class="label">工单号：</span><span class="value">{{ item.workNum }}</span></div> -->
              <div><span class="label">工单号：</span><el-link class="value" style="color: #16a4bb;font-weight:bold" @click="view(item.workNum)">{{ item.workNum }}</el-link></div>
              <div><span class="label">提交人：</span><span class="value" style="color: #16a4bb;font-weight:bold">{{ item.approveName }}</span></div>
              <div v-if="item.approveDepartment!=null">
                <!-- <el-col :span="40"> -->
                <span class="label">所属部门：</span>
                <!--<div style="position: relative; top: 17px;">
                  <treeselect
                    v-model="item.approveDepartment"
                    :disabled="true"
                    :multiple="true"
                    :options="availableOganizations"
                    :load-options="loadOptions"
                    placeholder=""
                  />
                </div>-->

                <span class="value" style="color: #16a4bb;font-weight:bold">{{ item.approveDepartment[0] }}</span>
              </div>
              <div v-if="item.approveDepartment==null">
                <!-- <el-col :span="40"> -->
                <span class="label">所属部门：</span>
                <!--<div style="position: relative; top: 17px;">
                  <treeselect
                    v-model="item.approveDepartment"
                    :disabled="true"
                    :multiple="true"
                    :options="availableOganizations"
                    :load-options="loadOptions"
                    placeholder=""
                  />
                </div>-->

                <span class="value" style="color: #16a4bb;font-weight:bold">{{ }}</span>
              </div>
              <div><span class="label">详细：</span><span class="value">{{ item.content }}</span></div>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    <EditForm v-if="dialogTaskVisible" :work-order-num="workOrderNum" :view-type="formHistoryView" @cancelNewOrderForm="cancelNewOrderForm" />
  </div>
</template>

<script>
import EditForm from '../../../workOrder/components/editFormPor'
/** import { tree } from '@neu/auth-ui/api/organization' */
import { formatDate } from '@neu/biz-core/utils/utils'
import { lifeByCode } from '@neu/dcam-ui/api/fixedAsset'

export default {
  name: 'LifeCyclePage',
  components: {
    EditForm
  },
  data() {
    return {
      list: [],
      itemData: null,
      workOrderNum: -1,
      /** 历史履历显示与否 */
      dialogTaskVisible: false,
      /** 编辑工单还是查看工单(履历形式) */
      formHistoryView: true,
      availableOganizations: null,
      approveDepartmentName: ''
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    // loadOptions({ action }) {
    //   if (action === 'LOAD_ROOT_OPTIONS') {
    //     return tree().then(response => {
    //       this.availableOganizations = [response.data]
    //       console.log('******availableOganizations******')
    //       console.log(this.availableOganizations)
    //     })
    //   }
    // },
    // getInfo() {
    //   this.loadOptions({ action: 'LOAD_ROOT_OPTIONS' })
    //   if (this.$attrs.asset) {
    //     lifeByCode(this.$attrs.asset).then(res => {
    //       console.log('$$$$$$$res.data$$$$$$')
    //       console.log(res.data)
    //       const data = res.data
    //       debugger
    //       for (const d in data) {
    //         const itemData = data[d]
    //         const orgData = this.availableOganizations
    //         orgData.forEach((itemOrg) => {
    //           if (itemOrg.code === itemData.approveDepartment[0]) {
    //             data[d].approveDepartmentName = itemOrg.title
    //           } else {
    //             itemOrg.children.forEach((aitem) => {
    //               if (aitem.code === itemData.approveDepartment[0]) {
    //                 data[d].approveDepartmentName = aitem.title
    //               } else {
    //                 aitem.children.forEach((citem) => {
    //                   if (citem.code === itemData.approveDepartment[0]) {
    //                     data[d].approveDepartmentName = citem.title
    //                   }
    //                 })
    //               }
    //             })
    //           }
    //         })
    //       }
    //       this.list = data
    //     })
    //   }
    // },
    getInfo() {
      if (this.$attrs.asset) {
        lifeByCode(this.$attrs.asset).then(res => {
          debugger
          const data = res.data
          this.list = data
          console.log(this.list)
        })
      }
    },
    // utc时间转本地时间
    utc2local(utc) {
      return formatDate(utc, 'YYYY-MM-DD HH:mm')
    },
    view(workNum) {
      // debugger
      this.workOrderNum = workNum
      this.dialogTaskVisible = true
    },
    cancelNewOrderForm(data) {
      // this.dialogFormVisible = false
      this.dialogTaskVisible = false
      // if (data === 'refresh') {
      //   this.refresh()
      // }
    }
  }
}
</script>

<style lang="scss">
.modify-desc {
  margin: 10px 0;
  div {
    display: inline-block;
    // margin-right: 10px;
    .label {
      color: #606266;
    }
  }
}
.vue-treeselect__control-arrow-container {
  opacity:0;
  visibility:hidden
}
// .vue-treeselect__control{
//   border:none;//去除边框
//   border-radius:0;
//   border-bottom:white 0px solid;
//   box-shadow: 0px 0px 0px 0px;//去除阴影
// }
</style>
